<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的商场</title>
		<style type="text/css">
			/*公共样式*/
			div,ul,li,a,p,span,body,img,form,button,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;}
			ul{list-style: none;}
			#header img{float:left;margin:40px;border:1px #ddd solid;padding:5px;}
			#header form{float:right;}
			.clear{clear:both;}
			#header{text-align: center;}
			#header{font-size: 50px;font-weight: bold;}
			div.nform form{font-size:30px;margin:40px;}
			.nbutton1 button{float-left:500px}
			#header h2:hover{color:red;}
			#nav{width:100%;height:50px;background:url("file:///F|/nav/nav1.png") repeat-x 0px 0px;margin-top:10px;}
			#nav ul li{width:100px;float:left;line-height:50px;margin-left:200px;}
			#nav ul li a{font-size:18px;color:#00f;text-decoration:none;line-height:50px;font-weight: bold;text-align:center;width:100px;height:50px;display:block;}
			#nav ul li a:hover{color:red;background-color:#fff;}
			#article{width:1500px;height:500px;float:left;}
			div .ar{width:350px;height:500px;margin:12px;float:left;}
			div .box .ar h4{color:red;float:left;}
			div .box .ar a{color:blue;float:right;font-size:10px;}
			#aside{float:left;margin-left:10px;}
			div .header1{background:url("file:///F|/images/spph_bg.gif") repeat-x 0px 0px;margin:10px;}
			div .header1 span{font-size:17px;float:left;font-weight: bold;margin:5px;}
			div .header1 a{float:right;font-size:15px;color:blue;margin:5px;}
			div .box1 .left{float:left;margin:10px;border:1px #ddd solid;padding:2px;}
			div .box1 .left img{float:left;border:1px #ddd solid;padding:5px;margin:10px;}
			div .box1 .right{float:right;padding:30px;}
			div .box1 .right ul li span{color:red;font-size:17px;margin-left:5px;}
			div .box1 .right ul li a{font-size:15px;margin-right:5px;text-decoration: none;line-height: 40px;padding:5px;}
			div .box1 .right ul li a:hover{font-size:16px;text-decoration:block;color:blue;padding:5px;}
			div .foot ul li{float:left;margin-left:50px;}
		</style>
	</head>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<body>
		<div id="container">
			<div id="header">
				<h2 title="老师，谢谢检查作业">商城导航区</h2>
				<img src="file:///F|/code/sj2.jpg" title="欢迎老师">
			</div>
			<div class="nform">
				<form action="#"; method="get"; name="form1">
					用户名称:<input type="text" class="name" value="名字"><br/><br/>
					用户密码:<input type="password" class="upass"><br/><br/>
				</form>
			</div>
			<div class="nbutton1">
				<button>提交</button><br/><br/>
			</div>
			<div class="clear"></div>
			<div id="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">商品浏览</a></li>
					<li><a href="#">精选推荐</a></li>
					<li><a href="#">大热卖</a></li>
					<li><a href="#">掌柜力推</a></li>
				</ul>
			</div>
			<!-- 主体开始 -->
			<div id="main">
				<!-- 内容主区开始 -->
				<div id="article">
					<div class="box">
						<div class="ar">
							<img src="file:///F|/code/11.jpg" style="width:350px;height:450px">
							<h4>惊喜吧</h4>
							<a href="#">点此详情</a>
						</div>
						<div class="ar">
							<img src="file:///F|/code/22.jpg" style="width:350px;height:450px">
							<h4>漂亮吧</h4>
							<a href="#">点此详情</a>
						</div>
						<div class="ar">
							<img src="file:///F|/code/33.jpg" style="width:350px;height:450px">
							<h4>可爱吧</h4>
							<a href="#">点此详情</a>
						</div>
						<div class="ar">
							<img src="file:///F|/code/44.jpg" style="width:350px;height:450px">
							<h4>联系我吧</h4>
							<a href="#">点此详情</a>
						</div>
					</div>
				</div>
				</div>
				<!-- 侧边栏开始 -->
				<div id="aside">
					<div class="header1">
						<span>信息一栏</span>
						<a href="#">速看>>></a>
					</div>
					<div class="clear"></div>
					<!-- 侧边盒子开始 -->
					<div class="box1">
						<!-- 左边盒子开始 -->
						<div class="left">
							<img src="file:///F|/code/tupian2.jpg">
						</div>
						<!-- 左边盒子结束 -->
						<!-- 右边盒子开始 -->
						<div class="right">
							<ul>
								<li><span>热门</span><a href="#"> 华为手机最新机型，国产无敌，点击查看详情.....</a></li>
								<li><span>精选</span><a href="#"> iphone8/7/6/6s钢化手机膜 防爆裂防指纹手机膜</a></li>
								<li><span>流行</span><a href="#"> 某明星最爱机型竟是.......</a></li>
								<li><span>大众</span><a href="#"> 人手一机的手机也是没谁了，点击看看....</a></li>
								<li><span>个性</span><a href="#"> 美国特大嘴在用的手机，我来偷偷告诉你.....</a></li>
							</ul>
						</div>
						<!-- 右边盒子结束 -->
						<!-- 侧边盒子结束 -->
					</div>
					<!-- 内容主区结束 -->
				</div>
				<!-- 侧边栏结束 -->
			</div>
			<!-- 主体结束 -->
			<!-- 页脚开始 -->
			<div class="clear"></div>
			<div id="footer">
				<div class="foot">
					<ul>
						<li><a href="#">购物开始</a></li>
						<li><a href="#">流程开始</a></li>
						<li><a href="#">生活开始</a></li>
						<li><a href="#">介绍开始</a></li>
						<li><a href="#">旅行产品</a></li>
						<li><a href="#">商家产品</a></li>
						<li><a href="#">购物开始</a></li>
						<li><a href="#">介绍开始</a></li>
						<li><a href="#">流程开始</a></li>
						<li><a href="#">投诉举报</a></li>
					</ul>
				</div>
			</div>
			<!-- 页脚结束 -->
		</div>
	</body>
</html>